/* 数据字典 */
<template>
  <div id="data_dictionary">
    <el-row class="head">
      <el-col :span="24">
        <h1 class="contract_title">数据字典</h1>
        <span>/ 对数据的字段进行管理</span>
      </el-col>
    </el-row>
    <div v-loading="loading_body">
      <div class="nav">
        <div class="nav-item">
          <el-select v-model="value" @change="change_option" placeholder="请选择" filterable>
            <el-option
              v-for="item in ddic_options"
              :key="item.ddicId"
              :label="item.ddicName"
              :value="item.tableName"
            ></el-option>
          </el-select>
        </div>
        <div class="nav-item">
          <el-button @click="dialog_save_classify = true">新增数据</el-button>
        </div>
      </div>
      <div class="content">
        <el-table
          :data="classify_tableData"
          :border="true"
          style="width: 100%;margin: 0 auto"
          v-loading="loading_table"
        >
          <el-table-column label="序号" width="100">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="启用" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_on"
                :active-value="1"
                :inactive-value="0"
                @change="is_on_change(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="_name" label="名称" width="150"></el-table-column>
          <el-table-column prop="_describe" label="描述" width="300"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle @click="classifyEdit(scope.row)"></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="classifyDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增和修改数据弹框 -->
    <el-dialog title="新增/修改数据" :visible.sync="dialog_save_classify">
      <el-form :model="classify" :rules="rules" ref="rule_form" label-width="80px">
        <el-form-item label="名称" prop="_name">
          <el-input v-model="classify._name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="classify._describe" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_save_classify = false">取 消</el-button>
        <el-button type="primary" @click="save_classify">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dataDictionary",
  data() {
    return {
      // 数据字典选项
      ddic_options: [],
      // 下拉选择框值
      value: "",
      // 表格数据源
      classify_tableData: [],
      // 大的loading控制
      loading_body: true,
      // 表格loading控制
      loading_table: true,
      // 新增和修改数据弹框控制开关
      dialog_save_classify: false,
      // 修改和新增数据源
      classify: {},
      // 表单验证
      rules: {
        _name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  methods: {
    /* 保存 */
    save_classify() {
      this.$refs["rule_form"].validate(valid => {
        if (valid) {
          this.classify.tableName = this.value;
          // 判断_id是否存在，来区分是新增还是修改
          if (!this.classify._id) {
            this.axios
              .post("api/dd/classify", this.classify)
              .then(() => {
                this.global.mes_success("新增成功");
                this.classify = {};
                this.getClassify();
              })
              .catch(() => {
                this.global.mes_error("新增失败");
              })
              .finally(() => {
                this.dialog_save_classify = false;
              });
          } else {
            // 调用修改方法
            this.is_on_change(this.classify);
            // 刷新数据
            this.getClassify();
            // 关闭弹窗
            this.dialog_save_classify = false;
          }
        } else {
          return false;
        }
      });
    },
    /* 打开编辑弹框 */
    classifyEdit(row) {
      this.classify = this.global.copy_obj(row);
      this.dialog_save_classify = true;
    },
    /* 删除字段 */
    classifyDelete(row) {
      row.tableName = this.value;
      window.console.log(row);
      this.global.confirm(
        "提示",
        "是否确认删除？",
        () => {
          this.axios
            .delete("api/dd/classify", { data: row })
            .then(() => {
              this.global.mes_success("删除成功");
              this.getClassify();
            })
            .catch(() => {
              this.global.mes_error("删除失败");
            });
        },
        () => {
          this.global.mes_message("取消删除");
        }
      );
    },
    /* 选项改变事件 */
    change_option(val) {
      this.getClassify();
    },
    /* 获取数据字典选项数据 */
    getDdics() {
      this.loading_body = true;
      this.axios
        .get("api/dd/ddics")
        .then(res => {
          this.ddic_options = res.data;
          this.value = this.ddic_options[0].tableName;
          this.getClassify();
          this.loading_body = false;
        })
        .catch(err => {
          this.global.mes_error("获取数据失败");
          this.loading_body = false;
          this.loading_table = false;
        });
    },
    /* 获取表格数据 */
    getClassify() {
      this.loading_table = true;
      let empty;
      // 根据value值查出当前选中对象
      for (let item of this.ddic_options) {
        if ((item.tableName = this.value)) {
          empty = item;
          break;
        }
      }
      this.axios
        .get("api/dd/classifies", { params: empty })
        .then(res => {
          this.classify_tableData = res.data;
          this.loading_table = false;
        })
        .catch(err => {
          this.global.mes_error("获取数据失败");
          this.loading_table = false;
        });
    },
    /* 修改数据事件 */
    is_on_change(row) {
      row.tableName = this.value;
      window.console.log(row);
      this.axios
        .put("api/dd/classify", row)
        .then(res => {
          // 清空数据
          this.classify = {};
          this.global.mes_success("修改成功");
        })
        .catch(err => {
          this.global.mes_error("修改失败");
          let obj = this.classify_tableData[
            this.classify_tableData.indexOf(row)
          ];
          if (obj.is_on == 1) {
            obj.is_on = 0;
          } else {
            obj.is_on = 1;
          }
        });
    }
  },
  created() {
    this.getDdics();
  }
};
</script>

<style scoped>
/* 头部样式 */
#data_dictionary {
  background: #e4e7ee;
}
.head {
  height: 70px;
  background: #f8f6f8;
  line-height: 70px;
}
.contract_title {
  display: inline-block;
  font-weight: unset;
  margin-left: 20px;
}
.el-col span {
  color: #b4b4bc;
}
.nav {
  margin: 20px;
  background: #fcfbfd;
  width: 100%-40px;
  height: auto;
  min-height: 55px !important;
  line-height: 55px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.nav .nav-item {
  display: inline-block;
  height: 45px;
  padding: 0px 15px;
  line-height: 45px;
}
.el-button--text {
  color: #606266;
  font-size: 14px;
}
.el-dropdown-link {
  color: #606266 !important;
}
.content {
  margin: 20px;
  min-height: 500px;
  background: #fcfbfd;
  width: 100%-40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>